<!--
 * @Author: w_yy
 * @Date: 2023-03-20 10:42:20
 * @LastEditors: w_yy
 * @LastEditTime: 2023-03-22 15:20:10
 * @FilePath: \vue-project\src\components\List.vue
 * @Copyright: 2023 沈阳东软智睿放疗技术有限公司
 * @Descripttion: 该文件用于OIS系统。版权由东软智睿放疗技术有限公司所有
-->
<template>
  <!-- list 是源数据的数组，而 item 是迭代项的别名
    index  表示当前项的位置索引
  -->
  <div>
    <div class="list" v-bind="$attrs">
      <slot>
        <h1>默认内容</h1>
      </slot>
      <a-list
        :grid="{
          gutter: 16,
          xs: 1,
          sm: 2,
          md: 4,
          lg: 4,
          xl: 6,
          xxl: 3,
          xxxl: 2,
        }"
        :data-source="list"
      >
        <template #renderItem="{ item }">
          <a-list-item>
            <!-- <a-input v-model:value="item.patientName" /> -->
            <!-- 动态数据， 静态数据 -->
            <card
              :item="item"
              a="1"
              disabled
              @openDrawer="showDrawer"
              v-model:name="item.patientName"
            />
            <!-- prop 的名字很长，应使用 camelCase 形式 -->
            <!-- <card :patient-name="item.patientName" v-bind="item" /> -->
          </a-list-item>
        </template>
      </a-list>
      <slot name="listBottom" v-bind="myObject"></slot>
    </div>
    <Drawer
      :title="patientDetail.patientName"
      placement="left"
      :visible="visible"
      @close="onClose"
    >
      <p>{{ patientDetail.diagnosis }}</p>
    </Drawer>
  </div>
</template>

<script>
import { reactive, toRefs, ref } from "vue";
import { List, Drawer, Input } from "ant-design-vue";
import Card from "../components/Card.vue";
export default {
  name: "List",
  components: {
    AList: List,
    Card,
    Drawer,
    AInput: Input,
  },
  setup() {
    const visible = ref(false);
    let info = {
      patientName: "陆梦",
      sex: "女",
      age: 40,
      phoneNumber: "18842419562",
      avatar: null,
      idNumber: "",
      isVip: true,
      medicalNumber: "0021214545",
      taskName: "图像导入",
      bedNo: "605-2",
      diagnosis:
        "C34.901 非小细胞肺癌非小细胞肺C34.901 非小细胞肺癌非小细胞肺C34.901 非小细胞肺癌非小细胞肺",
      diagnosisPosition: "肺部  原发  T1N0M0",
      dateTime: "2021-08-15",
      status: 1, //0不显示，1是黄色，2是红色
    };
    let dataInfo = reactive({
      list: [],
      myObject: {
        title: "How to do lists in Vue",
        author: "Jane Doe",
        publishedAt: "2016-04-10",
      },
      patientDetail: {},
    });
    //作用域
    for (let i = 0; i < 21; i++) {
      dataInfo.list.push(
        Object.assign({}, info, {
          patientName: `${info.patientName} ${i + 1}`,
        })
      );
    }
    //打开抽屉，查看详情
    function showDrawer(item) {
      visible.value = true;
      dataInfo.patientDetail = item;
    }
    //关闭抽屉
    function onClose() {
      visible.value = false;
    }
    return {
      visible,
      onClose,
      showDrawer,
      ...toRefs(dataInfo),
    };
  },
};
</script>

<style lang="less" scoped>
.list {
  width: 1280px;
}
</style>